<template>
  <a-layout style="height: 100%; width: 100%">
    <a-layout-sider
      :collapsed="data.collapsed"
      hide-trigger
      collapsible
      breakpoint="lg"
      theme="dark"
    >
      <a-menu :collapsed="data.menuCollapsed" @menu-item-click="onMenuClick">
        <a-menu-item key="/home/index">
          <icon-home />
          首页
        </a-menu-item>
        <a-sub-menu key="0">
          <template #icon><icon-apps></icon-apps></template>
          <template #title>Navigation 1</template>
          <a-menu-item key="0_0">Menu 1</a-menu-item>
          <a-menu-item key="0_1">Menu 2</a-menu-item>
          <a-menu-item key="0_2">Menu 3</a-menu-item>
          <a-menu-item key="0_3">Menu 4</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout-content>
      <a-page-header style="background-color: white" :title="gmconfig.title" @back="onCollapse">
        <template #back-icon>
          <component size="24" :is="data.collapsed ? 'icon-menu-unfold' : 'icon-menu-fold'" />
        </template>
        <template #extra>
          <a-dropdown>
            <a-button>
              <template #icon>
                <icon-user />
              </template>
              <template #default>{{ store.user.username }}</template>
            </a-button>
            <template #content>
              <a-doption @click="onProfile">
                <template #icon>
                  <icon-settings />
                </template>
                <template #default>个人资料</template>
              </a-doption>
              <a-doption @click="onLogout">
                <template #icon>
                  <icon-poweroff />
                </template>
                <template #default>注销</template>
              </a-doption>
            </template>
          </a-dropdown>
        </template>
      </a-page-header>
      <a-divider style="margin: 0px" />
      <div style="padding: 10px">
        <router-view />
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import voca from 'voca'
import { reactive } from 'vue'
import { useCommonStore } from '@/stores/common'
import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import gmconfig from '@/api/gmconfig.json'

const store = useCommonStore()
const router = useRouter() // 获得Router

// 为简化数据定义，将响应式数据变量利用 reactive 包装成一个组合实体对象
const data = reactive({
  collapsed: false,
  menuCollapsed: false
})

const onCollapse = () => {
  data.collapsed = !data.collapsed
}
const onMenuClick = (key) => {
  console.log('onMenuClick', key)
  if (voca.isBlank(key)) {
    Message.warning('开发中')
  } else {
    router.replace(key.righturl)
  }
}
const onLogout = () => {
  // 登录页面自动注销
  router.replace('/pub/login')
}
const onProfile = () => {
  Message.warning('开发中')
}
</script>

<style scoped>
.my-content-header {
  display: flex;
  justify-content: space-between;
  height: 100%;
  background-color: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border);
}
</style>
